<template>
    <!-- 用户头像 -->
    <el-avatar :size="35" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" />
    <!-- 用户信息 -->
    <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        admin
        <el-icon><ArrowDown /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>仓库地址</el-dropdown-item>
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item divided>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
</template>

<script setup lang="ts">
import {
  ArrowDown,
} from '@element-plus/icons-vue'
defineOptions({
  name: 'UserAvatar'
})
</script>

<style lang="scss" scoped>
.nav-right__user {
  display: flex;
  align-items: center;

  i {
    font-size: 14px;
  }
}

.el-dropdown {
  color: #000;

  .el-dropdown-link {
    display: flex;
    align-items: center;
    margin-left: 5px;
  }
}
</style>
